/* 导入变量和动画 */
@import './variables.css';
@import './animations.css';

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
}

#app {
  width: 100%;
  height: 100%;
}

/* macOS 风格滚动条 - overlay 模式，不占用空间 */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*:hover {
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* WebKit 滚动条样式 */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: 
    background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 40px;
  opacity: 0;
}

/* 鼠标悬停在可滚动元素上时显示滚动条 */
*:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.18);
  background-clip: padding-box;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.28);
  border-width: 2.5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}

*::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.4);
  border-width: 2px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

/* 滚动条在元素滚动时也显示（通过 :focus-within 或正在交互时） */
*:focus-within::-webkit-scrollbar-thumb {
  opacity: 1;
}

/* 深色模式滚动条 */
html.dark-mode *:hover {
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

html.dark-mode *:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.18);
  background-clip: padding-box;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 1;
}

html.dark-mode *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.28);
  border-width: 2.5px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.15);
}

html.dark-mode *::-webkit-scrollbar-thumb:active {
  background-color: rgba(255, 255, 255, 0.4);
  border-width: 2px;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
  opacity: 1;
}

/* 横向滚动条样式优化 */
::-webkit-scrollbar-thumb:horizontal {
  min-width: 40px;
}

/* 滚动条角落 */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* 禁用文本选择 */
.no-select {
  user-select: none;
  -webkit-user-select: none;
}

/* 启用文本选择 */
.select-text {
  user-select: text;
  -webkit-user-select: text;
}

/* 强调色 CSS 变量 */
:root {
  --accent-color: #007aff;
  --accent-rgb: 0, 122, 255;
}

/* 深色模式 */
html.dark-mode {
  color-scheme: dark;
}

html.dark-mode body {
  background: #1c1c1e;
  color: #f5f5f7;
}

html.dark-mode .menubar {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}

html.dark-mode .menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

html.dark-mode .menu-item.active {
  background: rgba(255, 255, 255, 0.15);
}

html.dark-mode .status-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

html.dark-mode .menu-item.logo svg path {
  fill: #f5f5f7;
}

html.dark-mode .status-item svg path {
  fill: #f5f5f7;
}

html.dark-mode .dock {
  background: transparent;
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(255, 255, 255, 0.1) inset;
}

html.dark-mode .dock-separator {
  background: rgba(255, 255, 255, 0.15);
}

html.dark-mode .window {
  background: rgba(40, 40, 42, 0.95);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

html.dark-mode .window-titlebar {
  background: rgba(50, 50, 52, 0.8);
}

html.dark-mode .window-title {
  color: #f5f5f7;
}

/* 滚动条样式控制 */
html[data-scrollbar="never"] ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html[data-scrollbar="never"] * {
  scrollbar-width: none;
}

html[data-scrollbar="always"] ::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

html[data-scrollbar="always"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  margin: 4px;
}

html[data-scrollbar="always"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  min-height: 40px;
  opacity: 1;
  transition: 
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-scrollbar="always"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
  border-width: 2.5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}

html[data-scrollbar="always"] ::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.45);
  border-width: 2px;
}

/* 滚动时显示 - 这是默认行为，已在上面定义 */
html[data-scrollbar="whenScrolling"] ::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

/* 减弱动画效果 */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* 使用强调色 */
.accent-bg {
  background-color: var(--accent-color);
}

.accent-text {
  color: var(--accent-color);
}

.accent-border {
  border-color: var(--accent-color);
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* macOS 模糊背景效果 */
.backdrop-blur {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.backdrop-blur-light {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ==================== */
/* 通用输入框样式 - macOS 设计规范 */
/* ==================== */

/* 所有输入框的基础样式 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: 
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 输入框聚焦状态 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #007AFF;
  box-shadow: 
    0 0 0 3.5px rgba(0, 122, 255, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.1),
    0 0 0 0.5px #007AFF inset;
  transform: translateY(-1px);
}

/* 深色模式下的聚焦状态 */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  border-color: #0A84FF;
  box-shadow: 
    0 0 0 3.5px rgba(10, 132, 255, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 0 0 0.5px #0A84FF inset;
}

/* 输入框 hover 状态 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 0 0 0.5px rgba(255, 255, 255, 0.6) inset;
}

html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover:not(:focus),
html.dark-mode textarea:hover:not(:focus),
html.dark-mode select:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 0 0.5px rgba(255, 255, 255, 0.1) inset;
}

/* 禁用状态 */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Placeholder 样式 */
input::placeholder,
textarea::placeholder {
  color: #86868B;
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.6;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #8E8E93;
}

/* 搜索框特殊样式 */
input[type="search"] {
  border-radius: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}

html.dark-mode input[type="search"] {
  background: rgba(58, 58, 62, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

input[type="search"]:focus {
  background: rgba(255, 255, 255, 0.95);
}

html.dark-mode input[type="search"]:focus {
  background: rgba(58, 58, 62, 0.85);
}

/* ==================== */
/* macOS 风格 Checkbox（复选框）样式 */
/* ==================== */

/* 隐藏默认 checkbox */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  background: white;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin: 0;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 0 0 0.5px rgba(255, 255, 255, 0.5) inset;
}

/* Checkbox hover 状态 */
input[type="checkbox"]:hover:not(:disabled) {
  border-color: rgba(0, 0, 0, 0.35);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 0 0 0.5px rgba(255, 255, 255, 0.6) inset;
  transform: scale(1.05);
}

/* Checkbox 选中状态 */
input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #0A84FF 0%, #0066D6 100%);
  border-color: #0066D6;
  box-shadow: 
    0 2px 6px rgba(10, 132, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 0 0.5px rgba(255, 255, 255, 0.15) inset;
}

/* Checkbox 选中时的对勾 */
input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -55%) rotate(45deg);
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Checkbox 未选中时的对勾（用于动画） */
input[type="checkbox"]:not(:checked)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -55%) rotate(45deg) scale(0);
  opacity: 0;
  transition: all 0.15s cubic-bezier(0.4, 0, 1, 1);
}

/* Checkbox focus 状态 */
input[type="checkbox"]:focus {
  outline: none;
  border-color: #0A84FF;
  box-shadow: 
    0 0 0 3px rgba(10, 132, 255, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 0 0 0.5px #0A84FF inset;
}

/* Checkbox 选中 + focus 状态 */
input[type="checkbox"]:checked:focus {
  box-shadow: 
    0 0 0 3px rgba(10, 132, 255, 0.2),
    0 2px 6px rgba(10, 132, 255, 0.35),
    0 0 0 0.5px rgba(255, 255, 255, 0.2) inset;
}

/* Checkbox 禁用状态 */
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Checkbox 选中 + hover 状态 */
input[type="checkbox"]:checked:hover:not(:disabled) {
  background: linear-gradient(180deg, #1A8FFF 0%, #0A7AE6 100%);
  border-color: #0A7AE6;
  box-shadow: 
    0 3px 8px rgba(10, 132, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 0 0 0.5px rgba(255, 255, 255, 0.2) inset;
  transform: scale(1.05);
}

/* Checkbox active（按下）状态 */
input[type="checkbox"]:active:not(:disabled) {
  transform: scale(0.95);
}

/* 深色模式下的 Checkbox */
html.dark-mode input[type="checkbox"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 0 0.5px rgba(255, 255, 255, 0.05) inset;
}

html.dark-mode input[type="checkbox"]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(255, 255, 255, 0.08) inset;
}

html.dark-mode input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #0A84FF 0%, #0066D6 100%);
  border-color: #0A84FF;
  box-shadow: 
    0 2px 6px rgba(10, 132, 255, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 0 0.5px rgba(255, 255, 255, 0.15) inset;
}

html.dark-mode input[type="checkbox"]:checked:hover:not(:disabled) {
  background: linear-gradient(180deg, #1A8FFF 0%, #0A7AE6 100%);
  border-color: #1A8FFF;
  box-shadow: 
    0 3px 8px rgba(10, 132, 255, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 0 0.5px rgba(255, 255, 255, 0.2) inset;
}

html.dark-mode input[type="checkbox"]:focus {
  border-color: #0A84FF;
  box-shadow: 
    0 0 0 3px rgba(10, 132, 255, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 0 0.5px #0A84FF inset;
}

/* Checkbox 标签样式 */
label.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: #1d1d1f;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

label.checkbox-label:hover {
  color: #000;
}

html.dark-mode label.checkbox-label {
  color: #f5f5f7;
}

html.dark-mode label.checkbox-label:hover {
  color: #fff;
}

label.checkbox-label input[type="checkbox"]:disabled ~ span {
  opacity: 0.5;
  cursor: not-allowed;
}

